import React from 'react'
import {inject, observer} from 'mobx-react';
import {toJS} from 'mobx';
import {Popover,Tools,Tabs,ActivityIndicator,SearchBar,Icon,TabBar } from 'weaver-mobile';
import { ListPage } from 'weaver-mobile-page';
import {Route, withRouter } from 'react-router-dom';
import { RouteLayout } from 'weaver-mobile-page';
import { StickyContainer, Sticky } from 'react-sticky';
import NoDataComponent from '../../../public/NoDataComponent'
import Incoice_v from '../../../public/Incoice-v';
const getLabel = Tools.getLabel;

@withRouter
@inject ('walletStore')
@observer
class Wallet extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            isSelect: false,
            selectedKey:'InvoiceEntry',
        }
    }

    static defaultProps = {
        prefixCls:"fna-wallet"
    }

    componentDidMount() {
        const { walletStore } = this.props;
        const { initData } = walletStore;
        initData();
    }

    render() {
        const { walletStore,prefixCls } = this.props;
        const { tabs,loading,changeTab,selectKey,tabPage } = walletStore;

        const data=[
            { title: '发票录入' , icon:"invoice-input" , key: "InvoiceEntry" },
            { title: '生成记账', icon:"write-down-a-note" , key: "generateAccount" },
            { title: '发起报销' , icon:"initiate-reimbursement" , key: "reimbursement" },

        ]    

        return (
            <div className={`${prefixCls}`}>
                <StickyContainer>
                    <Tabs 
                        tabs={tabs}
                        page={selectKey}
                        initialPage={0}
                        onChange={(tab,index)=>{changeTab(tab,index)}}
                    >
                        <div className={`${prefixCls}-tabPage`}>
                            { loading &&  <ActivityIndicator text="Loading..." />  } 
                            { !loading && 
                                <div>
                                    {this.getSearch()}
                                    {this.getTabPage()}
                                </div>
                            }
                        </div>
                    </Tabs>

                    
                </StickyContainer>
                

                <footer className={`${prefixCls}-footer`} >
                    {this.state.isSelect && <div className={`${prefixCls}-footer-left`}>
                        {tabPage.isSelectedAll ? 
                        <React.Fragment><Icon type="check-circle" color={'#55b1f9'} size={'sm'} onClick={()=>{tabPage.selectNone();}}/><span>{getLabel('387379','取消全选')}</span></React.Fragment> 
                        : 
                        <React.Fragment><Icon type="uncheck" color={'#ccc'} size={'sm'} /><span>{getLabel('556','全选')}</span></React.Fragment>}
                    </div>}
                    <div className={this.state.isSelect ? `${prefixCls}-footer-right` : `${prefixCls}-footer-right ${prefixCls}-footer-right-isSelect`}>
                        {data.map( item =>(
                            <div key={item.key} 
                                className={this.state.selectedKey == item.key ? 'fna-tab-bar-select' : 'fna-tab-bar-unselect'}
                                onClick={()=>{this.setState({selectedKey:item.key})}}>

                                <Icon type={item.icon} size={'sm'} />{item.title}
                            </div>
                        ))}
                    </div>
                </footer>

                {/* 路由层 */}
                <div>
                   
                </div>
            </div>
        )
    }

    //获取顶部搜索蓝
    getSearch = () =>{
        let comment;
        comment = <SearchBar
            className="search-select"
            placeholder="Search"
            showExtraButton
            extraButton={[
                { key: 'advanced', show: <Icon key="filter-o" type="filter-o" /> },
            ]}

            onExtraButtonClick={(key) => { console.log('onExtraButtonClick', key); }}
        />
        
        return comment;
    }

    //获取 tabPage
    getTabPage = () =>{
        const { walletStore,prefixCls } = this.props;
        const { tabPage } = walletStore;
        console.log('tabPage',tabPage)
        let comment;
        comment = 
            <div className={`${prefixCls}-select`}>
                {this.state.isSelect ? 
                    <div className={"accountBook-noSelect"}>
                        <span>共<span>1</span>条</span><i>合计：</i><b>CNY</b><em>1392.00</em>
                        <div onClick={()=>{this.setState({isSelect : false})}}>取消选择</div>
                    </div> 
                    : 
                    <div className={"accountBook-isSelect"} onClick={()=>{this.setState({isSelect : true})}}>选择</div>
                } 
            </div>

        return (
            <div className={`${prefixCls}-invoice`}>
                {comment}

                <ListPage.Normal
                    className={`fna-home-listPage ${prefixCls}-invoice-listPage`}
                    showCheck={this.state.isSelect}
                    multipleCheck={false}
                    withSwipeAction={true}
                    template={this.getTemplate()}
                    store={tabPage}
                    multipleCheck
                    // onRowClick={(v)=>console.log('点击行',v)}
                    onRowSelect={(v)=>{console.log('11111111',v)}}
                />
            </div>
        )     

        
    }

    //获取模板  报销流程
    getTemplate = (template) => {
        const {prefixCls} = this.props;
        const newTemplate = {
            default: [
                {
                    key: 'col1',
                    // style: { flex: '0 0 auto'},
                    render: (data) => {
                        let {incoiceDetails,key} = data;
                        return(
                            <div style={{backgroundColor: '#F3F7FE', backgroundClip: 'padding-box',paddingTop:'10px'}}>
                                <Incoice_v incoiceDetails={incoiceDetails} key={key}/>
                            </div>
                            
                        )
                    }
                },  

                    
            ],
        };

        return newTemplate;
    }    

    

}

export default Wallet;